<template>
  <div class="app-container">
    <uncerTree v-if="false" />
    <treeOther v-if="false" />
    <tree-dtree 
      v-if="true"
      :dataTree="res"
      @leftClick="leftClick"
      @rightClick="rightClick"/>
    <doubleTree v-if="false" />
    <tree-dt v-if="false" :treeDatab="res" />
    <bTree v-if="false" />
    <eTree v-if="false" />
    <tree-el v-if="false" />
    <tree-canvas :treeCanvas="res" v-if="false"/>
  </div>
</template>

<script>
import treeEl from '@/components/Tree/treeEl.vue'
import treeCanvas from '@/components/Tree/treeCanvas.vue'
import treeDt from '@/components/Tree/vueD3Tree.vue'
import treeDtree from '@/components/Tree/treeD3.vue'
import treeOther from '@/components/Tree/treeD3Other.vue'
import uncerTree from './child/nTree.vue'
import doubleTree from './child/doubleTree.vue'
import bTree from './quickTree/bTree.vue'
import eTree from './quickTree/eTree.vue'

import treeJson from './tree.json'
export default {
  components: {
    treeEl, treeCanvas, treeDt, doubleTree,
    treeDtree, treeOther, uncerTree, bTree, eTree
  },
  data() {
    return {
      res: treeJson.data.datas,
    }
  },
  created() {
    // console.log('treeJson')
    // console.log(this.res)
  },
  methods: {
    leftClick(d) {
      console.log(d)
    },
    rightClick(d) {
      console.log(d)
    }
  }
}
</script>

